/** 
 * 学习目标：综合案例
 * 
 * */
import React from "react";
import "./index.css"
export default class App extends React.Component {
    state = {
        // 用户名输入框
        username: '',
        // 评论内容
        content: '',
        list: [
            {
                id: 1,
                username: '思聪',
                content: '想你的夜',
            },
            {
                id: 2,
                username: '思聪2',
                content: '想你的夜2',
            },
            {
                id: 3,
                username: '思聪3',
                content: '想你的夜3',
            },
        ]
    };
    // 受控组件的内容变化
    handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value })
    }
    // 提交
    handlePublish = (e) => {
        // 阻止表单默认刷新事件
        e.preventDefault()
        const { username, content, list } = this.state
        // 判断内容是否为空
        if (!username.trim() || !content.trim()) return alert('内容不能为空喔')
        this.setState({
            list: [{ id: Date.now(), username, content, }, ...list],
            // 清空内容
            username: '',
            content: ''
        })
    }
    // 删除
    handleDel = (id) => {
        this.setState({ list: this.state.list.filter(item => item.id !== id) })
    }
    // 清空列表
    removeList = () => {
        this.setState({ list: [] })
    }
    render() {
        const { username, content, list } = this.state
        return (
            <div className="app">
                {/* 表单提交的时候，运行发布评论的函数 */}
                <form onSubmit={this.handlePublish}>
                    <input className="user" onChange={this.handleChange} name="username" value={username} type="text" placeholder="请输入评论人" />
                    <br />
                    <textarea className="content" onChange={this.handleChange} name="content" value={content} cols="30" rows="10" placeholder="请输入评论内容" />
                    <br />
                    <button>发表评论</button>
                    <button type="button" onClick={this.removeList}>清空评论</button>
                </form>
                <CommentList list={list} handleDel={this.handleDel}></CommentList>
            </div >
        );
    }
}

function CommentList({ list, handleDel }) {
    return (
        <ul>
            {!list.length ? (<div>暂无数据</div>) : (
                list.map(item => {
                    return (
                        <li key={item.id} >
                            <h3>评论人: {item.username}</h3>
                            <p>评论内容： {item.content}</p>
                            <button onClick={() => handleDel(item.id)}>删除</button>
                        </li>
                    )
                })
            )}
        </ul>
    )
}